<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="box">
        <div class="header">
            <div class="header-wrap">
                <a href="#">realme 官网</a>
                <a href="#" style="margin-left: 610px;">帮助中心</a>
                <div class="header_language">
                    <span class="language">简体中文</span> 
                    <span class="ic_down"></span>
                    <div>
                        <ul class="checkbox">
                            <li>简体中文</li>
                            <li>繁體中文</li>
                            <li>English</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="log-img"></div>
            <div class="content-con">
                <div class="login-form">
                    <div class="tab">
                        <div class="tab_item">帐号登录</div>
                    </div>

                    <div class="tab-form ">
                        <div class="tabloginway">
                            <p class="">密码登录</p>
                        </div>
                        <div class="zoneInput account">
                            <input type="text" placeholder="请输入手机号码或邮箱" id="username"> 
                        </div>
                        <div class=" inputbox">
                            <input type="password" placeholder="请输入密码" id="password">
                        </div>
                        <div class="codelogin">
                            <input type="button" class="button" value="登录" id="login"></input>
                        </div>
                        <div class="linkContainer">
                            <a href="#">隐私政策</a>
                            <a href="resigest.html" class="link">注册帐号</a>
                        </div>
                        <div class="authOther">
                            <div class="authOther_list">其他方式登录</div>
                            <div class="authOther_links">
                                <a class="authOther_link"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <p class="service_text">欢太为 realme 用户提供帐号服务</p>
            <p><span>© 2005 - 2020 广东欢太 版权所有 粤ICP备 14056724 号-2</span></p>
        </div>
    </div>
</body>



<script src="jquery.min.js"></script>
<!-- 登录请求 -->
<script>
    $("#login").click(function(){
        let username = $("#username").val()
        let password = $("#password").val()
        if(username && password){
            $.ajax({
                url:"http://127.0.0.1:82/login",
                data:{
                    username,
                    password
                },
                success(data){
                    if(data === "2"){
                        alert("用户名或密码错误")
                    }
                    else{
                        sessionStorage.setItem("userInfo",data )
                        location.href = "http://127.0.0.1:82/index.html"
                    }
                }
            })
        }
    })
</script>
<!-- 语言切换 -->
<script>
    $(".language").click(function(){
        $(".checkbox").toggleClass("isShow")
        $(".checkbox li").click(function(){
            $(".language").text($(this).text())
            $(".checkbox").removeClass("isShow")
        })    
    })
</script>
<!-- 登录切换 -->
<script>
   
    $(".tabloginway p").click(function(){
         $(".tabloginway p").removeClass("on")
        $(this).addClass("on")
        if($(this).text() === "短信验证码登录"){
            $(".tab-form").removeClass("tab-active")
            $(".tab-one").addClass("tab-active")
        }
        if($(this).text() === "密码登录"){
            $(".tab-form").removeClass("tab-active")
            $(".tab-two").addClass("tab-active")
        }
    })
</script>
    
</html>